<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的收藏</title>
<link href="../css/simpleGridTemplate.css" rel="stylesheet"
	type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
	<div class="container">
		<main> </main>
	</div>


	<script>
	$.ajax({
		url:'http://localhost:8080/user/queryEnshrine',
		data:{
			name:sessionStorage.getItem('name'),
		},
		type:'get',
		contentType:'application/json;charset=utf-8',
		success:function(res){
			console.log(res);
			var length=res.length/4;
			console.log(length);
			for(var i=0;i<length;i++){
				$('main ').append('<div class="gallery"></div>');
				for(var j=0;j<4;j++){
					$('.gallery ').eq(i).append('<div class="thumbnail"></div>');
				}
			}
 			var space_length = $('.thumbnail').length - res.length;
			for (var j = space_length; j > 0; j--) {
				$('main').children('.gallery:last-child').children('.thumbnail').eq(j).remove();
			} 
			$('.thumbnail').each(function(index){
				$(this).append('<a></a>');
				$(this).children('a').append('<img alt="" width="2000" class="cards"/>');
				$(this).append('<h3></h3>');
				$(this).append('<h6></h6>');
				$(this).attr('id',res[index].id);
				$(this).children('a').children('img').attr('src','../img/'+res[index].imgId);
				$(this).children('a').children('i').attr('name',"cn");
				$(this).children('h3').text(res[index]. cultural_relic_name);
				$(this).children('h6').text(res[index].cultural_relic_description);
			})
		}
	});
</script>
</body>
</html>
